<template>
	<view class="stats-container">
		<!-- 页面头部 -->
		<view class="stats-header">
			<text class="page-title">数据统计</text>
			<text class="page-subtitle">深入了解你的测试表现</text>
		</view>
		
		<!-- 时间范围选择器 -->
		<view class="time-selector">
			<view 
				v-for="period in timePeriods" 
				:key="period.value"
				:class="['time-option', { active: selectedPeriod === period.value }]"
				@click="selectTimePeriod(period.value)"
			>
				<text class="time-text">{{ period.label }}</text>
			</view>
		</view>
		
		<!-- 总体统计卡片 -->
		<view class="overview-section">
			<view class="section-title">总体概览</view>
			<view class="overview-grid">
				<view class="overview-card">
					<view class="card-icon">📊</view>
					<view class="card-value">{{ overviewStats.totalTests }}</view>
					<view class="card-label">总测试次数</view>
				</view>
				<view class="overview-card">
					<view class="card-icon">📅</view>
					<view class="card-value">{{ overviewStats.totalDays }}</view>
					<view class="card-label">测试天数</view>
				</view>
				<view class="overview-card">
					<view class="card-icon">🔥</view>
					<view class="card-value">{{ overviewStats.maxStreak }}</view>
					<view class="card-label">最长连续</view>
				</view>
				<view class="overview-card">
					<view class="card-icon">🏆</view>
					<view class="card-value">{{ overviewStats.achievements }}</view>
					<view class="card-label">解锁成就</view>
				</view>
			</view>
		</view>
		
		<!-- 测试类型统计 -->
		<view class="test-types-section">
			<view class="section-title">各项测试表现</view>
			<view class="test-type-list">
				<view 
					v-for="testType in testTypes" 
					:key="testType.key"
					:class="['test-type-card', { active: selectedTestType === testType.key }]"
					@click="selectTestType(testType.key)"
				>
					<view class="test-type-header">
						<view class="test-icon">{{ testType.icon }}</view>
						<view class="test-info">
							<text class="test-name">{{ testType.name }}</text>
							<text class="test-count">{{ testType.stats.totalTests }}次测试</text>
						</view>
					</view>
					<view class="test-stats">
						<view class="stat-item">
							<text class="stat-label">最佳</text>
							<text class="stat-value">{{ formatStatValue(testType.key, testType.stats.bestScore) }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">平均</text>
							<text class="stat-value">{{ formatStatValue(testType.key, testType.stats.averageScore) }}</text>
						</view>
					</view>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: getProgressWidth(testType.stats) + '%' }"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 趋势图表 -->
		<view class="trend-section" v-if="selectedTestType">
			<view class="section-title">{{ getTestTypeName(selectedTestType) }}趋势分析</view>
			<view class="chart-container">
				<view class="chart-header">
					<text class="chart-title">近{{ selectedPeriod }}天表现趋势</text>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color average"></view>
							<text class="legend-text">平均分</text>
						</view>
						<view class="legend-item">
							<view class="legend-color best"></view>
							<text class="legend-text">最佳分</text>
						</view>
					</view>
				</view>
				<view class="chart-area">
					<view class="chart-grid">
						<view class="grid-line" v-for="i in 5" :key="i"></view>
					</view>
					<view class="chart-data">
						<view 
							v-for="(point, index) in trendData" 
							:key="index"
							class="data-point"
							:style="{ 
								left: (index / (trendData.length - 1) * 100) + '%',
								bottom: (point.averageScore / maxTrendValue * 100) + '%'
							}"
							@click="showPointDetail(point, index)"
						>
							<view class="point-circle average"></view>
							<view class="point-tooltip" v-if="selectedPointIndex === index">
								<text class="tooltip-date">{{ point.date }}</text>
								<text class="tooltip-value">平均: {{ point.averageScore }}</text>
								<text class="tooltip-value">最佳: {{ point.bestScore }}</text>
								<text class="tooltip-count">测试: {{ point.count }}次</text>
							</view>
						</view>
					</view>
				</view>
				<view class="chart-x-axis">
					<text 
						v-for="(point, index) in trendData" 
						:key="index"
						class="x-axis-label"
						:style="{ left: (index / (trendData.length - 1) * 100) + '%' }"
						v-if="index % Math.ceil(trendData.length / 5) === 0"
					>{{ formatDateShort(point.date) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 详细统计 -->
		<view class="detailed-stats-section" v-if="selectedTestType">
			<view class="section-title">详细统计</view>
			<view class="detailed-stats-grid">
				<view class="detailed-stat-card">
					<view class="stat-header">
						<text class="stat-title">测试频率</text>
						<view class="stat-icon">📈</view>
					</view>
					<view class="stat-content">
						<text class="stat-main">{{ getTestFrequency() }}</text>
						<text class="stat-sub">次/天</text>
					</view>
				</view>
				<view class="detailed-stat-card">
					<view class="stat-header">
						<text class="stat-title">进步幅度</text>
						<view class="stat-icon">📊</view>
					</view>
					<view class="stat-content">
						<text class="stat-main" :class="getImprovementClass()">{{ getImprovement() }}</text>
						<text class="stat-sub">vs 上周</text>
					</view>
				</view>
				<view class="detailed-stat-card">
					<view class="stat-header">
						<text class="stat-title">稳定性</text>
						<view class="stat-icon">🎯</view>
					</view>
					<view class="stat-content">
						<text class="stat-main">{{ getStability() }}</text>
						<text class="stat-sub">标准差</text>
					</view>
				</view>
				<view class="detailed-stat-card">
					<view class="stat-header">
						<text class="stat-title">排名</text>
						<view class="stat-icon">🏆</view>
					</view>
					<view class="stat-content">
						<text class="stat-main">{{ getRanking() }}</text>
						<text class="stat-sub">全球排名</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最近记录 -->
		<view class="recent-records-section">
			<view class="section-title">最近记录</view>
			<view class="records-list">
				<view 
					v-for="record in recentRecords" 
					:key="record.id"
					class="record-item"
					@click="viewRecordDetail(record)"
				>
					<view class="record-icon">{{ getTestTypeIcon(record.testType) }}</view>
					<view class="record-info">
						<text class="record-name">{{ getTestTypeName(record.testType) }}</text>
						<text class="record-time">{{ formatDateTime(record.timestamp) }}</text>
					</view>
					<view class="record-score">
						<text class="score-value">{{ formatRecordScore(record) }}</text>
						<text class="score-grade">{{ getRecordGrade(record) }}</text>
					</view>
					<view class="record-arrow">›</view>
				</view>
			</view>
			<view class="load-more" v-if="hasMoreRecords" @click="loadMoreRecords">
				<text class="load-more-text">加载更多</text>
			</view>
		</view>
		
		<!-- 数据导出 -->
		<view class="export-section">
			<view class="section-title">数据管理</view>
			<view class="export-actions">
				<button class="export-btn" @click="exportData">
					<text class="btn-icon">📤</text>
					<text class="btn-text">导出数据</text>
				</button>
				<button class="clear-btn" @click="showClearConfirm">
					<text class="btn-icon">🗑️</text>
					<text class="btn-text">清除数据</text>
				</button>
			</view>
		</view>
		
		<!-- 清除确认弹窗 -->
		<view class="modal-overlay" v-if="showClearModal" @click="hideClearConfirm">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">确认清除数据</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">此操作将清除所有测试历史记录和统计数据，且无法恢复。确定要继续吗？</text>
				</view>
				<view class="modal-actions">
					<button class="modal-btn cancel" @click="hideClearConfirm">取消</button>
					<button class="modal-btn confirm" @click="clearAllData">确认清除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getAllTestStats, getTestHistory, getTestTrend, clearTestHistory } from '../../utils/testHistory.js'

// 响应式数据
const selectedPeriod = ref(7)
const selectedTestType = ref('memory')
const selectedPointIndex = ref(-1)
const showClearModal = ref(false)
const recentRecords = ref([])
const hasMoreRecords = ref(false)
const recordsPage = ref(1)
const recordsLimit = ref(10)

// 时间周期选项
const timePeriods = ref([
	{ value: 7, label: '7天' },
	{ value: 30, label: '30天' },
	{ value: 90, label: '90天' }
])

// 测试类型配置
const testTypes = ref([
	{ key: 'memory', name: '记忆力测试', icon: '🧠', stats: {} },
	{ key: 'reaction', name: '反应力测试', icon: '⚡', stats: {} },
	{ key: 'chimp', name: '黑猩猩测试', icon: '🐵', stats: {} },
	{ key: 'visual', name: '视觉记忆测试', icon: '👁️', stats: {} },
	{ key: 'typing', name: '打字速度测试', icon: '⌨️', stats: {} }
])

// 总体统计数据
const overviewStats = ref({
	totalTests: 0,
	totalDays: 0,
	maxStreak: 0,
	achievements: 0
})

// 趋势数据
const trendData = ref([])
const maxTrendValue = ref(100)

// 计算属性
const currentTestTypeStats = computed(() => {
	const testType = testTypes.value.find(t => t.key === selectedTestType.value)
	return testType ? testType.stats : {}
})

// 页面加载时初始化数据
onMounted(() => {
	loadAllStats()
	loadRecentRecords()
})

// 加载所有统计数据
const loadAllStats = () => {
	const allStats = getAllTestStats()
	
	// 更新总体统计
	overviewStats.value = {
		totalTests: allStats.totalTests,
		totalDays: allStats.totalDays,
		maxStreak: Math.max(...Object.values(allStats).map(stat => stat.maxStreak || 0)),
		achievements: getUnlockedAchievementsCount()
	}
	
	// 更新各测试类型统计
	testTypes.value.forEach(testType => {
		testType.stats = allStats[testType.key] || {
			totalTests: 0,
			bestScore: 0,
			averageScore: 0,
			bestTime: null,
			averageTime: 0,
			maxStreak: 0
		}
	})
	
	// 加载趋势数据
	loadTrendData()
}

// 加载趋势数据
const loadTrendData = () => {
	if (!selectedTestType.value) return
	
	const trend = getTestTrend(selectedTestType.value, selectedPeriod.value)
	trendData.value = trend
	
	// 计算最大值用于图表缩放
	const allScores = trend.flatMap(point => [point.averageScore, point.bestScore])
	maxTrendValue.value = Math.max(...allScores, 100)
}

// 加载最近记录
const loadRecentRecords = () => {
	const allRecords = []
	
	testTypes.value.forEach(testType => {
		const history = getTestHistory(testType.key, recordsLimit.value)
		history.forEach(record => {
			allRecords.push({
				...record,
				testType: testType.key
			})
		})
	})
	
	// 按时间排序
	allRecords.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
	
	recentRecords.value = allRecords.slice(0, recordsLimit.value)
	hasMoreRecords.value = allRecords.length > recordsLimit.value
}

// 选择时间周期
const selectTimePeriod = (period) => {
	selectedPeriod.value = period
	loadTrendData()
}

// 选择测试类型
const selectTestType = (testType) => {
	selectedTestType.value = testType
	selectedPointIndex.value = -1
	loadTrendData()
}

// 显示数据点详情
const showPointDetail = (point, index) => {
	selectedPointIndex.value = selectedPointIndex.value === index ? -1 : index
}

// 格式化统计值
const formatStatValue = (testType, value) => {
	if (!value) return '--'
	
	switch (testType) {
		case 'reaction':
			return `${value}ms`
		case 'typing':
			return `${value}WPM`
		default:
			return value.toString()
	}
}

// 获取进度条宽度
const getProgressWidth = (stats) => {
	if (!stats.totalTests) return 0
	return Math.min((stats.totalTests / 50) * 100, 100)
}

// 获取测试类型名称
const getTestTypeName = (testType) => {
	const type = testTypes.value.find(t => t.key === testType)
	return type ? type.name : testType
}

// 获取测试类型图标
const getTestTypeIcon = (testType) => {
	const type = testTypes.value.find(t => t.key === testType)
	return type ? type.icon : '📊'
}

// 格式化日期（短格式）
const formatDateShort = (dateStr) => {
	const date = new Date(dateStr)
	return `${date.getMonth() + 1}/${date.getDate()}`
}

// 格式化日期时间
const formatDateTime = (timestamp) => {
	const date = new Date(timestamp)
	return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 获取测试频率
const getTestFrequency = () => {
	const stats = currentTestTypeStats.value
	if (!stats.totalTests) return '0'
	
	// 简单计算：总测试次数除以测试天数
	const frequency = stats.totalTests / Math.max(selectedPeriod.value, 1)
	return frequency.toFixed(1)
}

// 获取进步幅度
const getImprovement = () => {
	// 这里可以实现更复杂的进步计算逻辑
	return '+12%'
}

// 获取进步幅度样式类
const getImprovementClass = () => {
	const improvement = getImprovement()
	if (improvement.startsWith('+')) return 'positive'
	if (improvement.startsWith('-')) return 'negative'
	return 'neutral'
}

// 获取稳定性
const getStability = () => {
	// 这里可以实现标准差计算
	return '8.5'
}

// 获取排名
const getRanking = () => {
	// 这里可以实现排名计算
	return 'Top 15%'
}

// 格式化记录分数
const formatRecordScore = (record) => {
	switch (record.testType) {
		case 'memory':
		case 'chimp':
			return `${record.finalScore || 0}分`
		case 'visual':
			return `${record.totalScore || 0}分`
		case 'typing':
			return `${record.finalWPM || 0}WPM`
		case 'reaction':
			return `${record.averageTime || 0}ms`
		default:
			return '--'
	}
}

// 获取记录等级
const getRecordGrade = (record) => {
	return record.grade || 'C'
}

// 查看记录详情
const viewRecordDetail = (record) => {
	uni.showToast({
		title: '记录详情功能开发中',
		icon: 'none'
	})
}

// 加载更多记录
const loadMoreRecords = () => {
	recordsPage.value++
	// 这里可以实现分页加载逻辑
}

// 导出数据
const exportData = () => {
	uni.showToast({
		title: '数据导出功能开发中',
		icon: 'none'
	})
}

// 显示清除确认
const showClearConfirm = () => {
	showClearModal.value = true
}

// 隐藏清除确认
const hideClearConfirm = () => {
	showClearModal.value = false
}

// 清除所有数据
const clearAllData = () => {
	testTypes.value.forEach(testType => {
		clearTestHistory(testType.key)
	})
	
	uni.showToast({
		title: '数据已清除',
		icon: 'success'
	})
	
	hideClearConfirm()
	loadAllStats()
	loadRecentRecords()
}

// 获取已解锁成就数量
const getUnlockedAchievementsCount = () => {
	try {
		const achievements = uni.getStorageSync('user_achievements')
		if (achievements) {
			const parsed = JSON.parse(achievements)
			return parsed.filter(a => a.unlocked).length
		}
	} catch (error) {
		console.error('获取成就数量失败:', error)
	}
	return 0
}
</script>

<style lang="scss" scoped>
.stats-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx;
	color: white;
}

.stats-header {
	text-align: center;
	margin-bottom: 40rpx;
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.page-subtitle {
		font-size: 28rpx;
		opacity: 0.8;
		display: block;
	}
}

.time-selector {
	display: flex;
	justify-content: center;
	gap: 20rpx;
	margin-bottom: 40rpx;
	
	.time-option {
		padding: 16rpx 32rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 25rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
		
		&.active {
			background: rgba(255, 255, 255, 0.2);
			border-color: rgba(255, 255, 255, 0.3);
		}
		
		.time-text {
			font-size: 28rpx;
			color: white;
		}
	}
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	color: white;
}

.overview-section {
	margin-bottom: 50rpx;
	
	.overview-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.overview-card {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			padding: 30rpx;
			text-align: center;
			backdrop-filter: blur(10rpx);
			
			.card-icon {
				font-size: 48rpx;
				margin-bottom: 15rpx;
			}
			
			.card-value {
				font-size: 42rpx;
				font-weight: bold;
				color: white;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.card-label {
				font-size: 24rpx;
				opacity: 0.8;
				color: white;
			}
		}
	}
}

.test-types-section {
	margin-bottom: 50rpx;
	
	.test-type-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		
		.test-type-card {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			padding: 25rpx;
			border: 2rpx solid transparent;
			transition: all 0.3s ease;
			
			&.active {
				background: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.3);
			}
			
			.test-type-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.test-icon {
					font-size: 40rpx;
					margin-right: 20rpx;
				}
				
				.test-info {
					flex: 1;
					
					.test-name {
						font-size: 32rpx;
						font-weight: bold;
						color: white;
						display: block;
						margin-bottom: 5rpx;
					}
					
					.test-count {
						font-size: 24rpx;
						opacity: 0.7;
						color: white;
					}
				}
			}
			
			.test-stats {
				display: flex;
				justify-content: space-between;
				margin-bottom: 15rpx;
				
				.stat-item {
					text-align: center;
					
					.stat-label {
						font-size: 22rpx;
						opacity: 0.7;
						color: white;
						display: block;
						margin-bottom: 5rpx;
					}
					
					.stat-value {
						font-size: 28rpx;
						font-weight: bold;
						color: white;
					}
				}
			}
			
			.progress-bar {
				height: 6rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 3rpx;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: linear-gradient(90deg, #4CAF50, #8BC34A);
					transition: width 0.3s ease;
				}
			}
		}
	}
}

.trend-section {
	margin-bottom: 50rpx;
	
	.chart-container {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 30rpx;
		backdrop-filter: blur(10rpx);
		
		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.chart-title {
				font-size: 28rpx;
				font-weight: bold;
				color: white;
			}
			
			.chart-legend {
				display: flex;
				gap: 20rpx;
				
				.legend-item {
					display: flex;
					align-items: center;
					gap: 8rpx;
					
					.legend-color {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						
						&.average {
							background: #4CAF50;
						}
						
						&.best {
							background: #FF9800;
						}
					}
					
					.legend-text {
						font-size: 22rpx;
						color: white;
						opacity: 0.8;
					}
				}
			}
		}
		
		.chart-area {
			position: relative;
			height: 300rpx;
			margin-bottom: 20rpx;
			
			.chart-grid {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.grid-line {
					height: 1rpx;
					background: rgba(255, 255, 255, 0.1);
				}
			}
			
			.chart-data {
				position: relative;
				height: 100%;
				
				.data-point {
					position: absolute;
					transform: translate(-50%, 50%);
					
					.point-circle {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						border: 3rpx solid white;
						
						&.average {
							background: #4CAF50;
						}
						
						&.best {
							background: #FF9800;
						}
					}
					
					.point-tooltip {
						position: absolute;
						bottom: 30rpx;
						left: 50%;
						transform: translateX(-50%);
						background: rgba(0, 0, 0, 0.8);
						padding: 15rpx;
						border-radius: 10rpx;
						min-width: 150rpx;
						text-align: center;
						z-index: 10;
						
						.tooltip-date {
							font-size: 22rpx;
							color: white;
							display: block;
							margin-bottom: 8rpx;
							font-weight: bold;
						}
						
						.tooltip-value,
						.tooltip-count {
							font-size: 20rpx;
							color: white;
							display: block;
							margin-bottom: 3rpx;
						}
					}
				}
			}
		}
		
		.chart-x-axis {
			position: relative;
			height: 30rpx;
			
			.x-axis-label {
				position: absolute;
				transform: translateX(-50%);
				font-size: 20rpx;
				color: white;
				opacity: 0.7;
			}
		}
	}
}

.detailed-stats-section {
	margin-bottom: 50rpx;
	
	.detailed-stats-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.detailed-stat-card {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			padding: 25rpx;
			backdrop-filter: blur(10rpx);
			
			.stat-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;
				
				.stat-title {
					font-size: 26rpx;
					color: white;
					opacity: 0.8;
				}
				
				.stat-icon {
					font-size: 32rpx;
				}
			}
			
			.stat-content {
				.stat-main {
					font-size: 36rpx;
					font-weight: bold;
					color: white;
					display: block;
					margin-bottom: 5rpx;
					
					&.positive {
						color: #4CAF50;
					}
					
					&.negative {
						color: #F44336;
					}
					
					&.neutral {
						color: #FF9800;
					}
				}
				
				.stat-sub {
					font-size: 22rpx;
					color: white;
					opacity: 0.6;
				}
			}
		}
	}
}

.recent-records-section {
	margin-bottom: 50rpx;
	
	.records-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		margin-bottom: 30rpx;
		
		.record-item {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 25rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			transition: all 0.3s ease;
			
			&:active {
				background: rgba(255, 255, 255, 0.2);
			}
			
			.record-icon {
				font-size: 36rpx;
			}
			
			.record-info {
				flex: 1;
				
				.record-name {
					font-size: 28rpx;
					color: white;
					display: block;
					margin-bottom: 5rpx;
				}
				
				.record-time {
					font-size: 22rpx;
					color: white;
					opacity: 0.7;
				}
			}
			
			.record-score {
				text-align: right;
				
				.score-value {
					font-size: 28rpx;
					font-weight: bold;
					color: white;
					display: block;
					margin-bottom: 3rpx;
				}
				
				.score-grade {
					font-size: 22rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
			
			.record-arrow {
				font-size: 32rpx;
				color: white;
				opacity: 0.5;
			}
		}
	}
	
	.load-more {
		text-align: center;
		padding: 20rpx;
		
		.load-more-text {
			font-size: 26rpx;
			color: white;
			opacity: 0.8;
		}
	}
}

.export-section {
	margin-bottom: 50rpx;
	
	.export-actions {
		display: flex;
		gap: 20rpx;
		
		.export-btn,
		.clear-btn {
			flex: 1;
			padding: 25rpx;
			border-radius: 15rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15rpx;
			transition: all 0.3s ease;
			
			.btn-icon {
				font-size: 32rpx;
			}
			
			.btn-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		
		.export-btn {
			background: rgba(76, 175, 80, 0.8);
			color: white;
			
			&:active {
				background: rgba(76, 175, 80, 1);
			}
		}
		
		.clear-btn {
			background: rgba(244, 67, 54, 0.8);
			color: white;
			
			&:active {
				background: rgba(244, 67, 54, 1);
			}
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	
	.modal-content {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
		max-width: 600rpx;
		
		.modal-header {
			text-align: center;
			margin-bottom: 30rpx;
			
			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.modal-body {
			margin-bottom: 40rpx;
			
			.modal-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				text-align: center;
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 20rpx;
			
			.modal-btn {
				flex: 1;
				padding: 25rpx;
				border-radius: 15rpx;
				border: none;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s ease;
				
				&.cancel {
					background: #f5f5f5;
					color: #666;
					
					&:active {
						background: #e0e0e0;
					}
				}
								&.confirm {
					background: #F44336;
					color: white;
					
					&:active {
						background: #D32F2F;
					}
				}
			}
		}
	}
}
</style>